<template>
	<view class="container">
		<!-- 		<image class="head-image" :src="isPlayingMusic?newsData.music.coverImg:newsData.headImgSrc"></image>
		<image catchtap="onMusicTap" class="audio" :src="isPlayingMusic?'/static/images/music/music-stop.png':'/static/images/music/music-start.png'"></image> -->
		<swiper indicator-dots="true" interval="5000" autoplay="true">
			<swiper-item v-for="(url) in newsData.newsImgSrc" :key="url">
				<image :src="url"></image>
			</swiper-item>
		</swiper>
		<view class="author-date">
			<image class="avatar" :src="newsData.mediaAvatar"></image>
			<text class="author">{{newsData.mediaAuthor}}</text>
			<text class="const-text">发表于</text>
			<text class="date">{{newsData.newsTime|fnFormatDate}}</text>
		</view>
		<text class="title">{{newsData.newsTitle}}</text>
		<view class="tool">
			<view class="circle-img">
				<image v-if="newsData.collection" @click="onCollectionTap" src="/static/images/icon/collection.png"></image>
				<image v-else @click="onCollectionTap" src="/static/images/icon/collection-anti.png"></image>
				<button open-type="share" @click.stop="">
					<image class="share-img" src="/static/images/icon/share.png"></image>
				</button>
			</view>
			<view class="horizon"></view>
		</view>
		<text class="detail">{{newsData.newsContent}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsData: {},
				newsId: 1
			};
		},
		onLoad: function(options) {
			this.newsId = options.newsId || 1;
			this.getNewsInfo()
		},
		methods: {
			getNewsInfo() {
				this.$api.getNewsInfo({
					newsId: this.newsId
				}, (res) => {
					if (res.code) {
						this.newsData = res.data
						uni.$emit('newsInfo',this.newsId)
					}
				})
			},
			onCollectionTap() {
				this.$api.addCollection({
					newsId: this.newsId
				}, (res) => {
					if(res.data.flog){
						this.newsData.collection=true
					}else{
						this.newsData.collection=false
					}
					uni.$emit('collection',this.newsId,res.data.flog)
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
	}

	.head-image {
		width: 100%;
		height: 460rpx;
	}

	.audio {
		width: 102rpx;
		height: 110rpx;
		position: absolute;
		left: 50%;
		margin-left: -51rpx;
		top: 180rpx;
		/* 透明度 */
		opacity: 0.6;
	}

	.author-date {
		flex-direction: row;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.avatar {
		height: 64rpx;
		width: 64rpx;
		vertical-align: middle;
	}

	.author {
		font-size: 30rpx;
		font-weight: 300;
		margin-left: 20rpx;
		vertical-align: middle;
		color: #666;
	}

	.const-text {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}

	.date {
		font-size: 24rpx;
		margin-left: 30rpx;
		vertical-align: middle;
		color: #999;
	}

	.title {
		margin-left: 40rpx;
		font-size: 36rpx;
		font-weight: 700;
		margin-top: 30rpx;
		/* 文字间距 */
		letter-spacing: 2rpx;
		color: #4b556c;
	}

	.tool {
		margin-top: 20rpx;
	}

	.circle-img {
		/* 浮动 */
		float: right;
		margin-right: 40rpx;
		vertical-align: middle;
	}

	.circle-img image {
		width: 90rpx;
		height: 90rpx;
	}

	.share-img {
		margin-left: 30rpx;
	}

	.horizon {
		width: 660rpx;
		height: 1px;
		background-color: #e5e5e5;
		vertical-align: middle;
		/* 图片重叠 */
		position: relative;
		top: 46rpx;
		margin: 0 auto;
		z-index: -99;
	}

	.detail {
		color: #666;
		font-size: 24rpx;
		margin-left: 30rpx;
		margin-top: 20rxp;
		margin-right: 30rpx;
		/* 文字的行高 */
		line-height: 44rpx;
	}

	swiper {
		width: 100%;
		height: 600rpx;
	}

	swiper image {
		width: 100%;
		height: 600rpx;
	}

	button {
		background-color: transparent;
		border-radius: 0rpx;
		padding: 0rpx;
		margin: 0rpx;
		display: inline-block;
		line-height: 1;
		overflow: visible;
		// color: atuo;
		color: rgba(78, 101, 101, 1);
	}

	button::after {
		/*button的边框样式是通过::after方式实现的*/
		border: none;
	}

	.button-hover {
		/*点击后样式*/
		color: #000;
		// background-color: rgb(247, 247, 247);
	}
</style>
